Tableros de Quarto®
Encuentro 9
Los dashboards o tableros de Quarto son archivos HTML que pueden ser:
Estáticos Se representan una sola vez y los datos no cambian - pueden incluir elementos dinámicos.
Programados Se representan a partir de un cronograma donde los datos se actualizan
Parametrizados Se modifican a partir de parámetros
Interactivo Mediante Shiny - requieren de servidor especial
El formato de la cabecera YAML de los tableros de Quarto es dashboard.
La salida generada es HTML y la estructura se asemeja al uso del paquete flexdashboard de RMarkdown.
Se puede definir como será la orientación y si se habilita el scrolling de la página.
Otras opciones específicas de la cabecera YAML para tableros son los logotipos y los botones de navegación.
Se reconocen alias para botones especiales predeterminados: linkedin, facebook, reddit, twitter y github. También se pueden crear botones personalizados a partir de íconos bootstrap.
logo: images/INE.gif
nav-buttons:
- linkedin
- twitter
- github
- facebook
- reddit
- icon: hospital
href: https://www.ine.gov.ar
target: _blankLos tableros constan de varios componentes:
Barra de navegación: ícono, título y autor junto con enlaces a subpáginas (si se define más de una página).
Páginas, filas, columnas y conjuntos de pestañas: las páginas, filas y columnas se definen mediante encabezados de Markdown (con atributos opcionales para controlar la altura, el ancho, etc.). Los conjuntos de pestañas se pueden utilizar para dividir aún más el contenido dentro de una fila o columna.
Tarjetas, barras laterales y barras de herramientas: las tarjetas son contenedores para gráficos, visualización de datos y contenido de formato libre. El contenido de las tarjetas generalmente se asigna a celdas en el documento fuente. Las barras laterales y las barras de herramientas se utilizan para presentar entradas dentro de tableros interactivos.
Los elementos de diseño básico son paginas, filas, columnas y pestañas.
Las paginas se definen con encabezados tamaño 1 (#)
Las filas y columnas se declaran con encabezados tamaño 2 (##)
Las pestañas utilizan la clase {.tabset} en filas tipo ## y cada pestaña se declara con un encabezado de tamaño 3 (###)
Las tarjetas que se ubican en las celdas que generan las filas, las columnas y/o las pestañas tienen un botón de expansión automático que maximiza la visualización.
La sintaxis de una tarjeta incluída en el diseño de página de un tablero tiene la forma:
El contenido de las tarjetas puede ser cualquiera de los elementos vistos anteriormente en Quarto basados en markdown o código HTML puro. También es útil incorporar valores dinámicos mediante código en línea.
Los cajas de valor son una excelente forma de mostrar valores simples de manera destacada dentro de un tablero.
La sintaxis dentro de un fragmento de código R tiene la siguiente estructura:
```{r}
#| content: valuebox
#| title: "Texto de la caja de valor"
list(
icon = "nombre-icono",
color = "color de la caja",
value = valor a mostrar)
)
```Los íconos pueden ser cualquiera de los 2000 disponibles en íconos de bootstrap
En color puede especificarse alguno de la paleta general hexadecimal o con palabras reservadas tipo primary, success, danger, etc. Estos colores variaran según el tema estético aplicado al tablero.
También se pueden crear cajas de valores usando Markdown simple, en cuyo caso normalmente se incluye el valor mediante una expresión en línea. Por ejemplo:
Se pueden incluir tablas dentro de estos tableros de dos formas:
Si lo que se quiere mostrar es una cantidad pequeña de observaciones se puede utilizar funciones de knitr o flextable sin problemas.
Estas tablas tendrán composición Markdown simples y llenan automáticamente al contenedor (desplazándose horizontal y verticalmente según sea necesario).
Si la tabla que queremos mostrar tiene muchos registros o es conveniente que se pueda ordenar de formas ascendente o descendente por alguna/s variable/s o hacer alguna busqueda particular, tenemos que hacer uso de algún paquete que incluya cierta interactividad.
Por ejemplo, el paquete DT, esta basado en una interfaz de JavaScript DataTables y agrega filtrado, paginación y ordenamiento a sus salidas.
Los gráficos son los elementos más comunes mostrados en tableros. Al igual que las tablas pueden ser estáticos o dinámicos/interactivos.
ggiraph, Plotly, highcharter, dygraphs, etc.Leaflet o mapviewEjemplo con ggiraph
Estos componentes dinámicos / interactivos basados en JavaScript mostrados en los paquetes para tablas y gráficos anteriores pertenecen a htmlwidgets.
En el sitio https://www.htmlwidgets.org/ perteneciente a RStudio / Posit se encuentran publicada la galería de librerías disponibles.
Cada uno de los 132 paquetes citados tienen su propia página con la referencia de sus funciones, modo de uso, ejemplos, etc.
Estos componentes se pueden incluir en dashboards con y sin servidor Shiny asociado y también en documentos HTML de Quarto.
Instituto Nacional de Epidemiología